<template>
      <div>
       <div v-if="currentMode === 'year'" :class="$style.iconBox">
          <i-ico :class="$style.hicon" name="d-left-arrow" notext :disabled="!getPrev()" @click="handlePrev()"></i-ico>
           <span @click="handleRange()">{{ getCurrentRange() }}</span>
          <i-ico :class="$style.hicon" name="d-right-arrow" notext :disabled="!getNext()" @click="handleNext()"></i-ico>
      </div>
      <div v-if="currentMode === 'range'" :class="$style.iconBox">
          <i-ico :class="$style.hicon" name="d-left-arrow" notext :disabled="!getPrev()" @click="handleRangePrev()"></i-ico>
           <span @click="handleRange()">{{ getCurrentRanges() }}</span>
          <i-ico :class="$style.hicon" name="d-right-arrow" notext :disabled="!getNext()" @click="handleRangeNext()"></i-ico>
      </div>
          <ul v-if="currentMode === 'year'":class="$style.yearBox">
            <li :class="$style.boxItem"
                v-for="(year, index) in getCurrentList()"
                :role="year.value === showYear"
                :disabled="year.disabled"
                :sindex="index%3"
                @click.stop="select(year, index)">
                <div :class="$style.yearItem">{{ year.value }}</div>
            </li>
          </ul>
           <ul v-if="currentMode === 'range'" :class="$style.yearBox">
                <li :class="[$style.boxItem, $style.boxItemRange]"
                v-for="(range, index) in getRangeList()"
                :role="range.value === getCurrentRange()"
                :sindex="index%3"
                :disabled="range.disabled"
                @click.stop="handerRangeSelect(range, index)">
                    <div :class="$style.yearItem">{{ range.value }}</div>
                </li>
          </ul>
      </div>
</template>
<script>
import { format, transformDate } from '../../utils/date';

export default {
    name: 'year-page',
    props: {
        minDate: [String, Date, Number],
        maxDate: [String, Date, Number],
        pageSize: { type: Number, value: 12 },
        currentTotalPage: { type: Number },
        currentYearList: { type: Array },
        showYear: { type: Number },
        yearDiff: { type: [String, Number] },
        yearAdd: { type: [String, Number] },
        picker: { type: String },
        date: {
            type: [String, Number, Date],
            default() {
                return new Date();
            },
        },
    },
    data() {
        const yearmin = this.date.getFullYear() - this.yearDiff;
        const yearmax = this.date.getFullYear() + parseInt(this.yearAdd);
        const currentYear = this.date.getFullYear();
        const gap = 10;

        return {
            currentPage: 1,
            currentYear, // 当前年份，推算默认面板的区间范围
            yearmin, // 年份的下限制
            yearmax, // 年份的上限值
            currentMode: 'year', // range 表示 切换到范围的选择
            gap: 10, // 一个面板的显示年份
            start: currentYear - currentYear % gap - 1, // 默认面板的 start
        };
    },
    methods: {
        transformDate,
        getPrev() {
            return this.start >= this.yearmin;
        },
        getNext() {
            return (this.start + this.pageSize) <= this.yearmax;
        },
        getRangePrev() {
            return this.start >= this.yearmin;
        },
        getRangeNext() {
            return (this.start + this.pageSize) <= this.yearmax;
        },
        handleRange() {
            // 切换到范围选择
            this.currentMode = 'range';
        },
        /* 切换到范围选择 */
        getRangeList() {
            const date = this.transformDate(this.date);
            let minDate = null;
            let maxDate = null;
            if (this.minDate)
                minDate = this.transformDate(this.minDate).getFullYear();
            if (this.maxDate)
                maxDate = this.transformDate(this.maxDate).getFullYear();
            const rangecol = [];
            // 基于当前 start 的范围值
            for (let i = 0; i < this.pageSize; i++) {
                const startyear = this.start + 1 + i * 10;
                const endyear = this.start + (i + 1) * 10;
                const obj = { value: `${startyear}-${endyear}`, startyear, endyear };
                if (minDate && startyear < minDate)
                    obj.disabled = true;
                else if (maxDate && endyear > maxDate)
                    obj.disabled = true;
                else
                    obj.disabled = false;

                // 范围超过了最大最小值
                if (endyear < this.yearmin || startyear > this.yearmax) {
                    obj.disabled = true;
                }
                rangecol.push(obj);
            }
            return rangecol;
        },
        getCurrentList() {
            const date = this.transformDate(this.date);
            let minDate = null;
            let maxDate = null;
            if (this.minDate)
                minDate = this.transformDate(this.minDate).getFullYear();
            if (this.maxDate)
                maxDate = this.transformDate(this.maxDate).getFullYear();
            const yearcol = [];
            // 基于当前年份推算当前的面板值
            for (let i = this.start; i < this.pageSize + this.start; i++) {
                const obj = { value: i };

                if (minDate && i < minDate)
                    obj.disabled = true;
                else if (maxDate && i > maxDate)
                    obj.disabled = true;
                else
                    obj.disabled = false;

                if (i < this.yearmin) {
                    obj.disabled = true;
                }

                if (i > this.yearmax) {
                    obj.disabled = true;
                }
                yearcol.push(obj);
            }
            return yearcol;
        },
        getCurrentRange() {
            return `${this.start + 1}-${this.start + 10}`;
        },
        getCurrentRanges() {
            return `${this.start + 1}-${this.start + 120}`;
        },
        handleRangePrev() {
            if (!this.getPrev()) {
                return;
            }
            this.start = this.start - 120; // 移动 12 个范围
        },
        handleRangeNext() {
            if (!this.getNext()) {
                return;
            }
            // 年份面板的切换
            this.start = this.start + 120; // 移动 12 个范围
        },
        handlePrev() {
            if (!this.getPrev()) {
                return;
            }
            this.start = this.start - 10; // 移动 10 年
        },
        handleNext() {
            if (!this.getNext()) {
                return;
            }
            // 年份面板的切换
            this.start = this.start + 10; // 移动 10 年
        },
        handerRangeSelect(range) {
            if (range.disabled) {
                return;
            }
            // 范围切换
            this.start = range.startyear - 1;
            this.currentMode = 'year';
        },
        select(year, index) {
            if (year.disabled) {
                return;
            }
            this.$emit('select', { value: year.value, index });
        },
    },

};
</script>
<style module>

.icon[role="prev"]::before {
content: "\e680";
    font-family: "lcap-ui-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.icon[role="next"]::before {
content: "\e64c";
    font-family: "lcap-ui-icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
.iconBox {
    display: flex;
    height: 32px;
    justify-content: space-between;
    width: 100%;
    line-height: 32px;
    cursor: pointer;
}

.iconBox[disabled], .iconBox[disabled]:hover {
    cursor: var(--cursor-not-allowed);
    background-color: var(--field-background);
    color: var(--color-light);
}

.yearBox {
    list-style: none;
    margin-bottom: -15px;
}

/* .yearItem {
    width: 33.3%;
    display: inline-flex;
    justify-content: center;
    padding: 10px 0;
    cursor: pointer;
}

.yearItem[role] {
    background-color: var(--brand-primary);
    color: var(--field-background);
}
.yearItem[role]:hover {
    background-color: var(--brand-primary);
}

.yearItem[disabled], .yearItem[disabled]:hover {
    cursor: var(--cursor-not-allowed);
    background-color: var(--field-background);
    color: var(--color-light);
} */
.boxItem {
    cursor: pointer;
    width: 33.3%;
    display: inline-flex;
    /* padding: 10px 0; */
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-bottom: 24px;
    border-radius: var(--calendar-border-radius);
    position: relative;
}
.boxItem[disabled],
.boxItem[disabled]:hover,
.boxItem[role][disabled] .yearItem ,
.boxItem[role][disabled]:hover .yearItem ,
.boxItem[disabled] .yearItem ,
.boxItem[disabled]:hover .yearItem {
    cursor: var(--cursor-not-allowed);
    background-color: var(--calendar-item-background-disabled);
    color: var(--color-light);
}

.boxItem[sindex="0"] {
    justify-content: flex-start;
}
.boxItem[sindex="0"][disabled] .yearItem {
    border-top-left-radius: var(--calendar-border-radius);
    border-bottom-left-radius: var(--calendar-border-radius);
}
.boxItem[disabled] + .boxItem[disabled]:not([sindex="0"])::before {
    content: '';
    position: absolute;
    background-color: var(--calendar-item-background-disabled);
    width: 30px;
    height: 100%;
    left: -20px;
    top: 0px;
    cursor: var(--cursor-not-allowed);
}
.boxItem:not([disabled]) + .boxItem[disabled] {
    background: transparent;
}

.boxItem[sindex="2"] {
    justify-content: flex-end;
}
.boxItem[sindex="2"][disabled] .yearItem {
    border-top-right-radius: var(--calendar-border-radius);
    border-bottom-right-radius: var(--calendar-border-radius);
}

.yearItem {
    width: 68px;
    text-align: center;
    height: 24px;
    line-height: 24px;
    border-radius: var(--calendar-border-radius);
}
.yearItem:hover {
    background: var(--calendar-item-background-hover);
    color: var(--calendar-item-color-hover);
    border-color: var(--calendar-item-border-color-hover);
}
.boxItem[role] .yearItem {
    background-color: var(--brand-primary);
    color: var(--field-background);
}
.boxItemRange .yearItem {
    width: 85px;
}
.boxItemRange[disabled] + .boxItemRange[disabled]:not([sindex="0"])::before {
    width: 8px;
    left: -4px;
}

.hicon {
    font-size: 12px;
    cursor: pointer;
    color: var(--calendar-icon-color);
}
.hicon:hover {
    color: var(--calendar-icon-color-hover);
}
.hicon[disabled],
.hicon[disabled]:hover {
    color: var(--calendar-icon-color-disabled);
    cursor: var(--cursor-not-allowed);
}

</style>
